<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
	<meta charset="utf-8">
	<title>个人资料--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/css/public.css" media="all" />
	<!-- NProgress -->
	<link href="/plugin/nprogress/nprogress.css" rel="stylesheet">
	<!-- 上传图片 -->
	<link href="/plugin/fileinput/fileinput.min.css" rel="stylesheet">

<!--	<link href="/plugin/font-awesome/css/font-awesome.min.css" rel="stylesheet" />-->
<!--	<link href="/css/custom.css" rel="stylesheet" />-->


	<!-- layer -->
	<!--<script th:src="@{https://cdn.bootcss.com/layer/2.1/layer.js}"
			type="text/javascript"></script>-->
	<script src="/layui/layui.js"></script>
</head>
<body class="childrenBody">
<form class="layui-form layui-row">
	<div class="layui-col-md3 layui-col-xs12 user_right">

		<div class="profile_img">
			<div id="crop-avatar">
				<!-- Current avatar -->
				<img class="img-responsive avatar-view"
					 src="" alt="Avatar" name="userImg" id="userImgForProfile"
					 title="Change the avatar" style="width: 255px;height: 255px; border-radius:250px;overflow: hidden;">
			</div>
		</div>
<!--		<a id="editProfileBtn" class="btn btn-success" data-toggle="modal" data-target="#profileEditModal">-->
<!--			<i class="fa fa-edit m-right-xs"></i>Edit Profile-->
<!--		</a>-->
		<br>
		<button type="button" class="layui-btn" id="test1">
			<i class="layui-icon">&#xe67c;</i>修改头像
		</button>

	</div>


	<div class="layui-col-md6 layui-col-xs12">
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" th:value="${session.user.realname }" disabled="disabled" class="layui-input disabled realName">
			</div>
		</div>
		<div class="layui-form-item" style="display: none">
			<label class="layui-form-label">用户id</label>
			<div class="layui-input-block">
				<input id="userId" type="text" th:value="${session.user.userid }" class="layui-input userid">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block">
				<input type="tel" th:value="${session.user.phone }" lay-verify="phone" class="layui-input phone">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-block">
				<input type="text" th:value="${session.user.identity }" lay-verify="identity"  class="layui-input identity">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">家庭住址</label>
			<div class="layui-input-block">
				<input type="text" th:value="${session.user.address }" lay-verify="address"  class="layui-input address">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">职位</label>
			<div class="layui-input-block">
				<input type="text" th:value="${session.user.position }" lay-verify="position"  class="layui-input position">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</div>
</form>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/page/user/userInfo1.js"></script>
<script type="text/javascript" src="/js/cacheUserInfo.js"></script>
<script type="text/javascript" src="/plugin/jquery/jquery.min.js"></script>
<!-- 引入js -->
<script src="/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<!--<script src="/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>-->

<!--<div th:replace="system/user/profileEdit"></div>-->


<!-- 上传图片 -->
<script type="text/javascript" src="/plugin/fileinput/fileinput.min.js" ></script>

<script type="text/javascript">

	$(document).ready(function() {
		initFileInput();

		initUserProfile($("#userId").val());

	});

	layui.use(['upload','jquery','layer'], function(){
		var upload = layui.upload;
		var $ = layui.jquery;
		var userid=$("#userId").val();
		//执行实例
		var uploadInst = upload.render({
			elem: '#test1' //绑定元素
			,url: "/user/userImg" //上传接口
			,data:{
				userid:function f() {
					return $("#userId").val();
				}
			}
			,done: function(rs) {
				if (rs.SUCCESS=="修改成功") {

					// alert(rs.SUCCESS),
					$.ajax({
						url: "/user/uploadUserSession",
						type: "get",
						data: {
							userid: userid
						},
						success: function (data) {
							//index.html中,左边导航栏的头像和右上方的头像
							$("#userImgForProfile2", parent.document).attr("src", data.user.imgurl)
							$("#userImgForProfile1", parent.document).attr("src", data.user.imgurl)
							//userInfo.html中个人资料的头像
							$("#userImgForProfile", parent.document).attr("src", data.user.imgurl)
							// parent.location.reload();
							window.location.reload();
							// window.location.href="/sys/toUserMassege"
						},
						error: function () {
							layer.msg("ajax请求失败");
						}
					})
					//上传完毕回调
				} else {
					layer.msg(rs.FAIL)
				}
			}
			,error: function(){
					//请求异常回调
				}
			});


	});

	//初始化编辑页面
	function initUserProfile(userid) {
		// console.log(userid);
		$.ajax({
			url : "/user/queryUserByUserId?userid=" + userid,
			type : "get",
			contentType: "application/json",
			success : function (user) {
				//console.log(user.imgurl)
				if (user.imgurl == null) {
					$("#userImgForProfile").attr("src", "/images/picture.jpg");
				} else {
					$("#userImgForProfile").attr("src", user.imgurl);
				}
			},
			error : function (data) {
				layer.alert(data.responseText, {icon: 0});
			}
		});
	}

	function initFileInput() {
		$("#uploadImage").fileinput({
			uploadUrl: "/user/userImg",
			enctype: 'multipart/form-data',
			previewFileType: "image",
			uploadAsync: true,
			allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
			maxFileCount: 1,
			maxFileSize: 3072,
			minImageWidth: 50,
			minImageHeight: 50,
			maxImageWidth: 1000,
			maxImageHeight: 1000,
			msgFilesTooMany: "Upload file count({n} - {m})",
			showCaption: false,
			dropZoneEnabled:false,
			showBrowse: true,
			browseClass: "btn btn-primary",
			uploadClass: "btn btn-info",
			removeClass: "btn btn-danger"
		}).on('fileerror', function (event, data, msg) {
			layer.alert("Upload file failed" + msg, {icon: 0});
		}).on('fileuploaded', function (event, data) {
			if (data.response.status == 200) {
				$("#userImg").val(data.response.object);
				$('#uploadPicture').fileinput('disable');
			} else {
				$(".fileinput-remove-button").click()
			}
			layer.alert(data.response.message, {icon: 0});
		}).on('fileclear', function (event) {
		});
	}
</script>


</body>
</html>